<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    body {
        background-color: #F7F8FA;
        /* background-color: red; */
        width: 100%;
        /* height: 100%; */
        margin: 0px;
    }

    .header {
        height: 60px;
        background-color: #fff;
        box-shadow: 0px 0px 5px #ccc;
    }

    .main {
        display: flex;
        justify-content: center;
    }
    .seconedBox{
        width: 1200px;
        display: flex;
        /* justify-content: center; */
    }
    .card {
        background-color: #fff;
        margin-top: 20px;
        border-radius: 4px;
        /* min-height: 200px; */
    }

    .card-0 {
        /* width: 320px; */
        height: 200px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .circle {
        width: 100px;
        height: 100px;
        background-color: #cccccc;
        border-radius: 50%;
    }

    .text_title {
        font-weight: 700;
        margin: 20px 0;
    }
    .text_context {
        color: #666666;
    }

    .col-right {
        flex: 1;
        /* background: #fff; */
        margin-right: 20px;
    }

    .col-left {
        width: 320px;
    }

    .card-1 {
        height: 200px;
        /* width: 100%; */
        /* margin-left: 20px; */
    }

    .card-2 {
        height: 200px;
        /* width: 100%; */
        margin-left: 20px;
    }
</style>

<body>


    <!-- 开始  
        参考图：   https://img.alicdn.com/imgextra/i2/O1CN011Li1wB1m0aIjWIsXT_!!6000000004892-0-tps-3640-1626.jpg
     -->
    <header class="header"></header>

    <div class="main">
        <div class="seconedBox">
            <div class="col-left">
                <div class="card card-0">
                    <div class="circle" ></div>
                    <div class="text_title" >张三</div>
                    <div class="text_context" > 体验技术部 - 前端工程师 </div>
                </div>
            </div>

            <div class="col-right">
                <div class="card card-1">

                </div>
                <div class="card card-2">

                </div>
            </div>
        </div>
    </div>
    <!-- 结束 -->





    <script>
        /*
            1. 去重 + 求和
           const array = [{value: 6}, {value: 2}, {value: 3}, {value: 5}, {value: 2}, {value: 5}];
           function multiple(array) {
               console.log(array, '---')
           }
           console.log(multiple(array)); // 应该输出180
       */

        const array = [{ value: 6 }, { value: 2 }, { value: 3 }, { value: 5 }, { value: 2 }, { value: 5 }];
        function multiple(array) {
            let newArr = []
            for (let i = 0; i < array.length; i++) {
                newArr.push(array[i].value)
            }
            return [...new Set(newArr)].reduce((a, b) => a * b)
        }
        // console.log(multiple(array)); // 应该输出180

        /*
            给定一个数组例如[1,3,4,6,7] ，再给定一个目标数，例如9。 写一个算法找出两个数他们相加等于目标数，
            返回他们在数组中的位置。给出一个解即可，同一个数字不能使用2次。
            比如[1,3,4,6,7] 目标数为9，那么需要返回[1,3]。如果目标数为20，返回null。
        */
        let arr = [1, 3, 4, 6, 7]
        function foo(arr, target) {
            let list = []
            for (let i = 0; i < arr.length; i++) {
                for (let j = 0; j < arr.length; j++) {
                    if (arr[i] == target - arr[j]) {
                        list.push([i, j])
                    }
                }
            }

            return list.length > 0 ? list[0] : null
        }

        // console.log(foo(arr, 9))
        // console.log(foo(arr, 20))

        /*
           const data = [
                { id: '1000', name: '深圳', children: [ { id: '1001', name: '宝安', children: [] }, { id: '1002', name: '南山', children: [ { id: '1012', name: '粤海街道', children: [ { id: '1112', name: '阿里中心', children: [] }, { id: '1212', name: '深圳湾人才公园', children: [] } ] } ] } ] }, { id: '2000', name: '广州', children: [ { id: '2001', name: '越秀区', children: [ { id: '2011', name: '人民公园' } ] }, { id: '2002', name: '天河区', children: [] } ] } ];

            find(data, '1000') // => '深圳'
            find(data, '2001') // => '越秀区'
            find(data, '1012') // => '粤海街道'
            find(data, '1112') // => '阿里中心'
            find(data, '1222') // => '未找到'
        */

        const data = [
            { id: '1000', name: '深圳', children: [{ id: '1001', name: '宝安', children: [] }, { id: '1002', name: '南山', children: [{ id: '1012', name: '粤海街道', children: [{ id: '1112', name: '阿里中心', children: [] }, { id: '1212', name: '深圳湾人才公园', children: [] }] }] }] }, { id: '2000', name: '广州', children: [{ id: '2001', name: '越秀区', children: [{ id: '2011', name: '人民公园' }] }, { id: '2002', name: '天河区', children: [] }] }];

        // function find(arr, id) {  // 数组扁平化的 写法
        //     let newArr = [] 
        //     function foo1(arr2, id2) {
        //         for(let i=0; i<arr2.length; i++) {
        //             if( !Array.isArray(arr2[i]) ) {
        //                 newArr.push({id: arr2[i].id, name: arr2[i].name})
        //                 if(arr2[i].children && arr2[i].children.length) {
        //                     foo1(arr2[i].children, id2)
        //                 }
        //             }
        //         }
        //     }
        //     foo1(arr, id)
        //     return newArr.filter(f => f.id == id)[0] ? newArr.filter(f => f.id == id)[0].name : '未找到'
        // }

        function find(data, num) {  // 闭包的 写法
            let name = '未找到'
            function aaa(data, num) {
                for (let i = 0; i < data.length; i++) {
                    data[i].id === num ? name = data[i].name : data[i].children ? aaa(data[i].children, num) : ''
                }
                return name
            }
            return aaa(data, num)
        }
        // console.log(find(data, '1000')) // => '深圳'
        // console.log(find(data, '2001')) // => '越秀区'
        // console.log(find(data, '1012')) // => '粤海街道'
        // console.log(find(data, '1112')) // => '阿里中心'
        // console.log(find(data, '1222')) // => '未找到'
    </script>
</body>

</html>